<template>
    <div class="home">
        <!-- 轮播图区域 -->

            <!-- 在组件中使用v-for循环的话,一定绑定key -->

        <!-- <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
                <img :src="item.img" alt="">
            </mt-swipe-item>
        </mt-swipe> -->
        <swiper-box :lunbotuList="lunbotuList" idfull="true"></swiper-box>
        <!-- 九宫格 -->
        <!-- <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">新闻咨询</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu2.png" alt="">
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu3.png" alt="">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu4.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu5.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu6.png" alt="">
		                    <div class="mui-media-body">联系我们</div></a></li>
		        </ul> -->
        
    <mui-grid></mui-grid>
    
    
    
    </div>
</template>

<script>
//引入定义好的九宫格组件
import MuiGrid from '../muicomponents/MuiGrid.vue'
//轮播图组件
import Swiper from '../subcomponents/Swiper.vue'

import {Toast} from 'mint-ui'

export default {
    data(){
        return{
            lunbotuList:[], //保存轮播图的数组
        }
    },
    components:{
        'mui-grid' : MuiGrid,
        'swiper-box' : Swiper
    },
    created(){
        this.getLunbotu()
    },
    methods:{
        getLunbotu(){
            this.$http.get('api/getlunbo').then(result=>{
                // console.log(result)
                if(result.body.status === 0){
                    //成功了
                    this.lunbotuList = result.body.message
                    // Toast('加载轮播图成功')
                }else{
                    Toast('加载轮播图失败')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    // .mint-swipe{
    //     height: 200px;
    // }
    // .mint-swipe-item img{
    //     height: 100%;
    //     width: 100%;
    // }
    // .mint-swipe-item:nth-child(1){   //后代选择器
    //     background: aqua
    // }
    // .mint-swipe-item:nth-child(2){
    //     background: yellow
    // }
    // .mint-swipe-item{    &代表.mint-swipe-item
    //     &:nth-child(1){ //交集选择器
    //         background: aqua
    //     }
    //     &:nth-child(2){ //交集选择器
    //         background: red
    //     }
    // }
    // .mui-grid-view.mui-grid-9{
    //     background: #fff;
    //     border: none;
    // }
    // .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    //     border: 0;
    //     img{
    //         width: 50%;
    //         height: 50%;
    //     }
    //     .mui-media-body{
    //         font-size: 13px;
    //     }
    // }
</style>